<script setup lang="ts">
defineOptions({
  name: "abnormalInfoSearch"
});

import { ref, onMounted, inject, computed } from "vue";
import { getFabList } from "@/api/modules/fab";
import { queryChildByTypeCodeAndItemValue } from "@/api/solidity";
import { cloneDeep } from "@pureadmin/utils";
import { useRouterStoreHook } from "@/store/modules/router";

const routerStore = useRouterStoreHook();
const routerQuery = inject("routerQuery", ref<Record<string, any>>({}));
const subject = inject("subject", ref<SubjectType>(null));

const loading = defineModel("loading", { type: Boolean, default: false });
const props = withDefaults(defineProps<{ isEqpIdSelect?: boolean }>(), {
  isEqpIdSelect: false
});

const params = ref<Record<string, any>>({
  deviceId: "",
  alarmLevel: "",
  alarmType: "",
  alarmTime: []
});
const defaultTime = ref<Array<Date>>([new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]);
const deviceIdLoading = ref(false);
// 机台ID
const deviceIdOption = ref<Array<any>>([]);
// 报警级别
const alarmLevelOption = ref<Array<any>>([]);
// 报警类别
const alarmTypeOption = ref<Array<any>>([]);

const select_max_width = computed(() => (props.isEqpIdSelect ? "121px" : ""));

const emits = defineEmits(["change"]);

const deviceIdRemoteMethod = async (query: string) => {
  if (query) {
    deviceIdLoading.value = true;
    const res = await getFabList(query, () => {
      deviceIdLoading.value = false;
    });
    deviceIdOption.value = res?.map(item => ({
      ...item,
      label: item.eqpId,
      value: item.eqpId
    }));
    deviceIdLoading.value = false;
  } else {
    deviceIdOption.value = [];
  }
};

const getParams = () => {
  const p = cloneDeep(params.value);
  p["alarmTimeStart"] = "";
  p["alarmTimeEnd"] = "";
  if (p.alarmTime?.length) {
    p["alarmTimeStart"] = p.alarmTime[0];
    p["alarmTimeEnd"] = p.alarmTime[1];
  }
  delete p.alarmTime;
  if (!props.isEqpIdSelect) {
    const { eqpId: deviceId = "" } = routerQuery.value;
    p["deviceId"] = deviceId;
  }
  const deviceType = null;
  const className = subject.value;
  p["deviceType"] = deviceType;
  p["className"] = className;
  return p;
};

const deviceIdChangeHandler = () => {
  emits("change", getParams());
};
const alarmLevelChangeHandler = () => {
  emits("change", getParams());
};
const alarmTypeChangeHandler = () => {
  emits("change", getParams());
};
const alarmTimeChangeHandler = () => {
  emits("change", getParams());
};

const init = async () => {
  loading.value = true;
  // 报警级别
  const res: Array<any> = await queryChildByTypeCodeAndItemValue({ typeCode: "FAB_ALARM_LEVEL" }, () => {
    loading.value = false;
  });
  if (res?.length) {
    alarmLevelOption.value = res.map(item => ({ ...item, label: item.itemName, value: item.itemValue }));
  }
  // 报警类别
  const res2: Array<any> = await queryChildByTypeCodeAndItemValue({ typeCode: "FAB_ALARM_TYPE" }, () => {
    loading.value = false;
  });
  if (res2?.length) {
    alarmTypeOption.value = res2.map(item => ({ ...item, label: item.itemName, value: item.itemValue }));
  }
  emits("change", getParams());
  loading.value = false;
};

onMounted(async () => {
  await init();
});
</script>

<template>
  <div class="abnormal-info-search-content" :style="{ flexWrap: isEqpIdSelect ? 'wrap' : 'nowrap' }">
    <px-select
      v-if="isEqpIdSelect"
      v-model="params.deviceId"
      filterable
      remote
      reserve-keyword
      remote-show-suffix
      clearable
      placeholder="机台ID"
      :loading="deviceIdLoading"
      :remote-method="deviceIdRemoteMethod"
      @change="deviceIdChangeHandler"
    >
      <px-option v-for="item in deviceIdOption" :key="item.value" :label="item.label" :value="item.value" />
    </px-select>

    <px-select v-model="params.alarmLevel" clearable filterable placeholder="报警级别" @change="alarmLevelChangeHandler">
      <px-option v-for="item in alarmLevelOption" :key="item.value" :label="item.label" :value="item.value" />
    </px-select>

    <px-select v-model="params.alarmType" clearable filterable placeholder="报警类别" @change="alarmTypeChangeHandler">
      <px-option v-for="item in alarmTypeOption" :key="item.value" :label="item.label" :value="item.value" />
    </px-select>

    <px-date-picker
      v-model="params.alarmTime"
      type="daterange"
      clearable
      :editable="false"
      range-separator="-"
      :prefix-icon="null"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD HH:mm:ss"
      :default-time="defaultTime"
      @change="alarmTimeChangeHandler"
    />
  </div>
</template>

<style lang="scss" scoped>
.abnormal-info-search-content {
  display: flex;
  gap: 12px;
  align-items: center;

  .px-select {
    min-width: 60px;
    max-width: v-bind(select_max_width);
  }
}

:deep(.is-active) {
  border: 1px solid var(--px-input-focus-border-color);
}
</style>
